<template>
	<view class="codeLogin-warp">
		<view class="login-bg"></view>
		<view class="codeLogin">
			<span class="codeLogin-text">账号注册</span>
			<view class="form-warp">
				<view class="form email">
					<u--input
						placeholder="请输入邮箱"
						border="surround"
						v-model="mail"
						class="inputWarp"
					></u--input>
				</view>
				<view class="form code">
					<u--input
						placeholder="六位验证码"
						border="surround"
						v-model="code"
						class="inputWarp"
					></u--input>
					<u-button
						style="width: 50%; margin-top: 10px; margin-left: 50px"
						type="primary"
						:disabled="disabled"
						@click="sendCodes"
					>
						发送验证码
					</u-button>
				</view>
				<view class="form password">
					<u--input
						placeholder="密码"
						border="surround"
						type="password"
						v-model="password"
						class="inputWarp"
					></u--input>
				</view>
			</view>
			<u-button
				style="margin-top: 50rpx; width: 50%"
				type="primary"
				@click="register"
			>
				注册完成
			</u-button>
		</view>
	</view>
</template>

<script>
import { sendCode, emailRegister } from '@/common/api/register.js';
export default {
	data() {
		return {
			mail: '',
			password: '',
			code: '',
			disabled: false
		};
	},
	methods: {
		sendCodes() {
			sendCode(this.mail)
				.then((res) => {
					uni.showToast({
						title: '验证码发送成功，请注意查收哦~',
						icon: 'none'
					});
					this.disabled = true;
				})
				.catch((err) => {
					uni.showToast({
						title: '当前请求次数过多~',
						icon: 'none'
					});
					console.log(err);
				});
		},
		r() {
			const params = {
				email: this.mail,
				password: this.password,
				code: this.code
			};
			emailRegister(params).then((res) => {
				uni.navigateTo({
					url: '/pages/login/login'
				});
				uni.showToast({
					title: res.message,
					icon: 'none'
				});
			});
		},
		register() {
			if (this.mail == '' || this.password == '' || this.code == '') {
				uni.showToast({
					title: '信息校验失败~',
					icon: 'none'
				});
				return;
			} else {
				this.r();
			}
		}
	}
};
</script>

<style>
.codeLogin-warp {
	width: 750rpx;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.login-bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0%;
	left: 0%;
	background: linear-gradient(to bottom, rgba(116, 195, 202, 1), rgba(116, 195, 202, 0)); /* 从上到下的线性渐变 */
}

.codeLogin {
	width: 80%;
	height: 300px;
	margin-top: 50px;
	background-color: #fff;
	border-radius: 10px;
	z-index: 2;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	padding: 10px;
}

.form-warp {
	width: 100%;
}

.code {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 50px;
}

.inputWarp {
	margin-top: 10px;
}

.codeLogin-text {
	font-size: 18px;
	font-family: 'Source Han Sans SC Bold';
}
</style>
